import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";//解析.vue文件
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
import * as path from "path";

import { ViteImageOptimizer } from "vite-plugin-image-optimizer";

// 按需自动倒入element UI
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

import postcssImport from "postcss-pxtorem"  // 用来将px转换成rem适配

// vite默认只会编译ts
export default defineConfig({
    plugins:[
        vue(),
        VueSetupExtend(),
        // element UI 按需加载,自动导入 ...
        AutoImport({
            imports: ["vue", "vue-router"], //生成auto-imports.d.ts文件
            // eslintrc: { enabled: true } //第一次启动生成就不用生成了 生成.eslintrc-auto-import.json文件
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
        ViteImageOptimizer({
            jpg:{
                quality:90,
            },
            png:{
                quality:100, //保留的画质
            }
        }), // 图片进行压缩
    ],
    resolve: {
        alias: [
            // 配置和rollup一样
            { find: "@", replacement: path.resolve(__dirname, "src") }
        ]
    },
    css: {
        preprocessorOptions: {
            scss: {
                api:"modern-compiler", // 版本弃用方法提示
                additionalData: `@use "@/styles/variables.scss" as *;` // 导出全局变量和 mixin
            }
        },
        postcss: {
            plugins: [
                postcssImport({
                    rootValue: 192, // 这里的rootValue就是你的设计稿大小
                    propList: ['*'],
                    unitPrecision: 6,
                    selectorBlackList: ['.no-rem', 'no-rem'],// 要忽略的选择器并保留为px。
                    exclude: /node_modules/i // 排除 node_modules 文件(node_modules 内文件禁止转换)
                })
            ]
        }
    }
})